<template>
	<view class="container">
		<uni-section title="uniCloud" sub-title="" type="line">
			<button type="default" @click="addStudent">添加记录</button>
			<button type="default" @click="getStudent">获取数据</button>
			<uni-list>
				<uni-list-item v-for="(item,index) in students" 
				:title="item.name" :right-text="item.age"></uni-list-item>
			</uni-list>
		</uni-section>
		<uni-section title="动画效果" sub-title="" type="line">
			
			<view id="box"
				@click="getClientRect"
			 class="box" :animation="animation" style="background-color: #18BC37; height: 200rpx;width: 200rpx;">
				这个是一个动画效果区块
			</view>
			
			<button type="default" @click="getViewPort">可是区域的信息</button>
		</uni-section>
		<uni-section title="剪切板" sub-title="" type="line">
			<uni-easyinput  v-model="context" placeholder="请输入内容" />
			<view>{{otherContext}}</view>
			<button @click="clipboard">赋值到剪切板</button>
		</uni-section>
		<uni-section title="视频控制组件" type="line">
			<video id="my-video" :src="src"
			 @timeupdate="timeupdate"
			 :enable-danmu="true"
			 :danmu-list="danmulist"
			 :controls="false" style="width: 100%;"></video>
			 <view>
				 <uni-easyinput  
				  v-model="danmuContext"
				  @confirm="confirm" 
				 placeholder="请输入弹幕内容,按确认发送内容" />
			 </view>
			<view class="controls">
				<button type="default" size="mini" @click="videoPlay">播放</button>
				<button type="default" size="mini" @click="videoStop">停止</button>
				<button type="default" size="mini" @click="videoSkip">前进10S</button>
				<button type="default" size="mini" @click="videoBack">后退10S</button>
				<text>{{currentTime}}</text>
			</view>
		</uni-section>
		<uni-section title="map" sub-title="" type="line">

			<view>地址信息：{{location.latitude}}</view>
			<button type="default" size="mini" @click="getLocation">获取位置信息</button>
			<map :latitude="location.latitude" :longitude="location.longitude" :markers="markers"
				style="width: 100%; height: 500rpx;"></map>

			<button type="default" @click="getSysInfo">获取系统信息</button>
			<view class="show">
				{{sysinfo}}
			</view>
			内容主体，可自定义内容及样式
		</uni-section>
	</view>
</template>

<script>
	export default {
		methods: {
			getStudent(){
				uniCloud.callFunction({name:"student01api",data:{"action":"get"}})
					.then(res =>{
						console.log(res);
						this.students =res.result.data
					})
			},
			addStudent(){
				uniCloud.callFunction({name:"student01api"})
						.then(res=>{
							console.log(res);
							})
			},
			getViewPort(){
				uni.createSelectorQuery().selectViewport().scrollOffset(res => {
				  console.log("竖直滚动位置" + res.scrollTop);
				}).exec();
		
			},
			getClientRect(){
				
				const query = uni.createSelectorQuery().in(this)
				let view = query.select('#box')
				
				view.boundingClientRect((res)=>{
					this.clientRect = res
				}).exec()
			},
			clipboard(){
				uni.setClipboardData({
					data: this.context
				})
				.then(()=>{
					uni.getClipboardData({
						success: (res) => {
							console.log(res);
							this.otherContext = res.data
						}
					})
				})
			},
			confirm(){ // 输入框按下回车按钮时触发，输入完成时触发
				this.videoContext.sendDanmu({
					text : this.danmuContext,
					color:"#4CD964"
				})
			},
			timeupdate(res){
				console.log(res);
				this.currentTime = res.detail.currentTime
			},
			videoPlay() {
				this.videoContext.play() // 播放视频
			},
			videoStop() {
				// #ifdef MP-WEIXIN
				this.videoContext.stop()
				// #endif
				// #ifndef MP-WEIXIN
				this.videoContext.pause()
				// #endif
			},
			videoSkip() {
				this.currentTime += 10 // 快进10S
				this.videoContext.seek(this.currentTime)
			},
			videoBack() { 
				// 回退10S
				this.currentTime -= 10
				this.videoContext.seek(this.currentTime)
			},
		
			getSysInfo() {
				uni.getSystemInfo({
					success: (res) => {
						console.log(res);
						// uni.showToast({
						// 	title: '蒙版toast',
						// 	icon: 'success',
						// 	duration: 3000,
						// 	image: '/static/logo.png'
						// });
						// uni.showModal({
						// 	title:'模态对话框，是否确认删除',
						// 	confirmText:'删除',
						// 	showCancel:false,
						// 	content:'删除一条记录',
						// 	success: (res1) => {
						// 		console.log(res1);
						// 	}
						// })
		
						//uni.hideLoading()
						// uni.showActionSheet({
						// 	itemList:['移动应用开发1班','移动应用开发2班'],
						// 	success: (res2) => {
						// 		console.log(res2);
						// 	}
						// })
						// uni.setTabBarItem({
						// 	index:0,
						// 	text: "新首页"
						// })
		
						uni.setTabBarBadge({
							index: 0,
							text: '200'
						})
		
						setTimeout(() => {
							uni.removeTabBarBadge({
								index: 0
							})
						}, 5000)
		
					}
				})
			},
			getLocation() {
				uni.showLoading({
		
				})
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res);
						// 获取位置的经纬度
						this.location.latitude = res.latitude
						this.location.longitude = res.longitude
		
						this.markers[0].latitude = res.latitude
						this.markers[0].longitude = res.longitude
					}
				})
			}
		},
		data() {
			return { 
				students:[],
				clientRect:{},
				animation:{}, // 动画数据
				context:'',
				otherContext:'',
				danmulist:[
					{
						text: "好好学习",
						color: "red",
						time: 1.5
					},
					{
						text: "天天向上",
						color: "green",
						time: 1.55
					}
				],
				danmuContext:'', // 保存输入的内容
				currentTime:0,
				src: '/static/4.mp4',
				sysinfo: '',

				location: {
					latitude: '',
					longitude: ''
				},
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					iconPath: '../../static/logo.png',
					width: 30,
					height: 30
				}]
			}
		},
		onReady() {
			// 创建视频控制器
			this.videoContext = uni.createVideoContext('my-video')
		},
		onShow() {
			// 创建动画对象，添加动画，到处动画数据，更新动画效果
			// let anima = uni.createAnimation({
			// 	duration:3000,
			// 	timingFunction:"linear"
			// })
			// this.animation = anima.scale(2,2).rotate(45).step({duration:3000})
			// 		.scale(1,1).rotate(0).step({duration:3000}).export()
		}
		
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
